<template>
    <div class="zhexiantu">
        <div id="zhexian" style="width:600px;height:300px;margin:auto"></div>
    </div>
</template>

<script>
    export default {
        name: "CZHEXIANTU",
        data() {
            return {

            }
        },
        computed:{
            clickdata(){
                return this.$store.state.clickdata
            },
            A(){
                 return this.$store.state.clickdata.A
            },
        },
        mounted(){
            this.dataEcharts()
        },
        watch:{
            A(){
                this.dataEcharts()
            }
        },
        methods:{
             dataEcharts: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('zhexian'));

                // 绘制图表
                myChart.setOption({
                    xAxis: {
                        data: ['2017', '2018', '2019', '2020', '2021']
                    },
                    yAxis: {},
                    series: [
                        {
                        data:[this.clickdata.A,this.clickdata.B,
                        this.clickdata.C,this.clickdata.D,this.clickdata.E],
                        type: 'line',
                        }
                    ]
                });
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
    },

        },
    }
</script>

<style lang="scss" scoped>
.zhexiantu{
    width: 600px;
    margin-left:40px ;
    float:left;

}

</style>